import React, { Component } from 'react'
import styles from './Comment.module.scss'
import { NavBar, Icon ,Toast} from 'antd-mobile';
import axios from '../../axios/axios'
class Comment extends Component {
  constructor(props){
    super(props)
    this.id = props.match.params.id
    this.page = 1
    this.totalPage = 0
    this.loading = false
    this.state = {
      CommentList:[],
      loading:true
    }
    this.refScroll = React.createRef()
  }
  async componentDidMount(){
    this.refScroll.current.addEventListener('scroll', this.handleScroll)
   await this.getCommentList(this.id,this.page)
  }
  componentDidWillUnmount() {
    this.refScroll.current.removeEventListener('scroll', this.handleScroll)
    this.setState = () => false;
  }
  getCommentList = (id,page) => {
    axios.get('reviews/books/'+id+'?showType=time&pageNo='+page+'&pageSize=15').then((res)=>{
      this.totalPage = res.data.totalPage
      this.setState({
        CommentList:[...this.state.CommentList,...res.data.data],
        loading:false
      })
    })
  }
  handleScroll =async () => {
    let parentElement = this.refScroll.current;
    let clientHeight = parentElement.clientHeight;//可视区高632
    let scrollHeight = parentElement.scrollHeight;//1154
    let scrollTop = parentElement.scrollTop;//522
    if (scrollHeight - clientHeight - scrollTop < 1 && !this.loading) {
      if (this.page >= this.totalPage) {
        Toast.info('到底了', 1);
        return
      }
      this.page++
      this.loading = true
      await this.getCommentList(this.id,this.page)
      this.loading = false
    }
  }
  
  render() {
    console.log(this.state.CommentList)
    return (
      <div className={styles.comment}>
        <div className={this.state.loading?'background':'hidder'}><Icon type={'loading'}/>加载中...</div>
        <NavBar
            mode="light"
            icon={<Icon type="left" style={{ color: '#333', fontSize: '24px' }} />}
            onLeftClick={() => this.props.history.go(-1)}
            rightContent={[
              <Icon onClick={() => this.props.history.push('/seek')} key="0" type="search" style={{ marginRight: '6px', color: '#333' }} />
            ]}
          >更多书评</NavBar>
        <div className={styles.center} ref={this.refScroll}>
              {this.state.CommentList && this.state.CommentList.map((v) => {
                return <div key={v.id} className={styles.item}>
                  <div className={styles.left}>
                    <img src={v.userIcon} alt="" />
                  </div>
                  <div className={styles.right}>
                    <div className={styles.name}> {v.userName} </div>
                    <div className={styles.comm}> {v.summary} </div>
                    <p>
                      <span> {v.reviewShowTime} </span>
                      <span>回复:{v.score} </span>
                    </p>

                  </div>
                </div>
              })}
            </div>
      </div>
    )
  }
}


export default Comment;